<!-- 生活服务 -->
<template>
    <div class="app-register">
        <div class="ae-header">
            <div class="top">
                <span>生活服务</span>
            </div>
            <div class="content">
                <div class="img">
                    <img src="../assets/lifeimg/我的订单.png" alt="">
                    <span>我的订单</span>
                </div>
                <div class="view-all">
                    <span>查看全部</span>
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>

        <div class="model">
            <van-grid square :column-num="5" :border="false">
                <van-grid-item>
                    <div class="grid-item">
                        <div class="tag">送1amer</div>
                        <img src="../assets/lifeimg/唯品会.png" alt="">
                        <span>唯品会</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <div class="tag">换好礼</div>
                        <img src="../assets/lifeimg/旧衣书籍.png" alt="">
                        <span>旧衣书籍</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <img src="../assets/lifeimg/同城跑腿.png" alt="">
                        <span>同城跑腿</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <div class="tag">回收换新</div>
                        <img src="../assets/lifeimg/手机服务.png" alt="">
                        <span>手机服务</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <img src="../assets/lifeimg/洗护专区.png" alt="">
                        <span>洗护专区</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <img src="../assets/lifeimg/搬家乔迁.png" alt="">
                        <span>搬家乔迁</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <img src="../assets/lifeimg/帮我拿.png" alt="">
                        <span>帮我拿</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <div class="tag">10元速抢</div>
                        <img src="../assets/lifeimg/电影购票.png" alt="">
                        <span>电影购票</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <img src="../assets/lifeimg/生鲜商城.png" alt="">
                        <span>生鲜商城</span>
                    </div>
                </van-grid-item>
                <van-grid-item>
                    <div class="grid-item">
                        <img src="../assets/lifeimg/全部.png" alt="">
                        <span>全部</span>
                    </div>
                </van-grid-item>
            </van-grid>
        </div>

        <div class="ae-footer">
            <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="#ff6b35">
                <van-swipe-item v-for="(banner, index) in banners" :key="index">
                    <div class="banner-slide" :style="{ backgroundImage: `url(${banner.img})` }">
                        <div class="banner-content">
                            <h3>{{ banner.title }}</h3>
                            <p>{{ banner.desc }}</p>
                            <button class="banner-btn" v-if="banner.btnText">{{ banner.btnText }}</button>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="bottom">
            <div class="section-title">
                <h2>精品推荐</h2>
                <span>限时限量，好价福利</span>
            </div>
            <div class="product-list">
                <div class="product-item" v-for="(item, index) in list" :key="index">
                    <div class="product-image">
                        <img :src=item.img alt="商品图片">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">{{ item.title }}</h3>
                        <div class="price-section">
                            <span class="current-price">{{ item.price }}</span>
                            <span class="original-price">{{ item.originalPrice }}</span>
                        </div>
                        <div class="sales">{{ item.sales }}</div>
                        <div class="shop-info">
                            <span class="shop-name">电影频道</span>
                            <span class="location">看相似</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-bar">
            <div class="tab-item">
                <van-icon name="home-o" />
                <span>家快递</span>
            </div>
            <div class="tab-item">
                <van-icon name="search" />
                <span>查快递</span>
            </div>
            <div class="tab-item">
                <div class="vip-icon">会员</div>
                <span>会员福利</span>
            </div>
            <div class="tab-item active">
                <van-icon name="service-o" />
                <span>生活服务</span>
            </div>
            <div class="tab-item">
                <van-icon name="contact" />
                <span>我的</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LifePage',
    data() {
        return {
            banners: [
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs…42462/681674eeFe833b8ac/06a0472b488061fd.png.webp',
                    title: '尊享家件优惠',
                    desc: '顺丰联名卡 限时抢购',
                    btnText: '立即领取'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s700x280_jfs/t1/98547/36/39077/65677/64e5c3e6F5c45f101/1c61d00b6a0f6f0e.jpg!q70.dpg.webp',
                    title: '回收手机领固补',
                    desc: '旧机多赚15%'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s700x280_jfs/t1/142537/31/38950/100913/65e9a7e3Fa6fac7d4/d2c0dff5649ba2d3.jpg!q70.dpg.webp',
                    title: '看《开心超人》',
                    desc: '购票立减10元'
                }
            ],
            list: [
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/249598/37/1665/83063/6593e75eFb3b7724d/2085ed88214a2854.jpg!q70.dpg.webp',
                    title: '热映电影《情书》',
                    price: '¥39.9',
                    originalPrice: '¥49.9',
                    sales: '热映中 | 好评如潮',
                    shopName: '电影频道',
                    location: '看相似'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/249598/37/1665/83063/6593e75eFb3b7724d/2085ed88214a2854.jpg!q70.dpg.webp',
                    title: '《开心超人之逆世营救》',
                    price: '¥29.9',
                    originalPrice: '¥39.9',
                    sales: '月销1000+ | 儿童动画',
                    shopName: '动画频道',
                    location: '看相似'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/250827/1/29205/96433/67bfdb5aF35d12293/4f0d061bd57e4be0.jpg!q70.dpg.webp',
                    title: '豪华爆米花套餐',
                    price: '¥45',
                    originalPrice: '¥60',
                    sales: '月销1000+ | 影院热卖',
                    shopName: '零食小铺',
                    location: '看相似'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/285197/6/20980/106699/67ff725bFc054efef/142769e309318176.png.webp',
                    title: '冰爽可乐',
                    price: '¥12',
                    originalPrice: '¥15',
                    sales: '月销2500+ | 解渴首选',
                    shopName: '饮料专区',
                    location: '看相似'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/279499/6/25148/82618/68073180F2d99009b/4a68db1d0e320023.jpg!q70.dpg.webp',
                    title: '限量版电影周边',
                    price: '¥199',
                    originalPrice: '¥299',
                    sales: '限量发售 | 粉丝收藏',
                    shopName: '官方周边店',
                    location: '看相似'
                },
                {
                    img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/317778/22/6528/125499/6841390cF24f69fbe/5282cca0b389f8d8.png.webp',
                    title: '可重复使用3D眼镜',
                    price: '¥25',
                    originalPrice: '¥35',
                    sales: '环保材质 | 清晰视野',
                    shopName: '影院配件',
                    location: '看相似'
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.app-register {
    background: linear-gradient(to bottom, #fc712e 20%, #ffffff);
    padding: 10px 10px 60px;
    min-height: 100vh;
    position: relative;

    .top {
        margin-top: 20px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
    }

    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        border-radius: 10px;
        margin: 15px 0;
        padding: 0 15px;
        background-color: #ffffff;

        .img {
            display: flex;
            align-items: center;

            img {
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }

            span {
                font-size: 15px;
                font-weight: bold;
            }
        }

        .view-all {
            display: flex;
            align-items: center;
            color: #999;
            font-size: 13px;

            .van-icon {
                margin-left: 3px;
            }
        }
    }

    .model {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 10px 0;
        margin-bottom: 10px;

        .grid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            img {
                width: 40px;
                height: 40px;
                margin-bottom: 5px;
            }

            span {
                font-size: 12px;
            }

            .tag {
                position: absolute;
                top: -8px;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(to right, #ff4e50, #f9d423);
                color: #fff;
                font-size: 10px;
                padding: 1px 5px;
                border-radius: 8px;
                white-space: nowrap;
            }
        }
    }

    .ae-footer {
        margin: 10px 0;
        height: 134px;
        border-radius: 10px;
        overflow: hidden;

        .banner-swipe {
            height: 100%;
            width: 100%;
            border-radius: 10px;
        }

        .banner-slide {
            height: 100%;
            width: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 20px;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
            }
        }

        .banner-content {
            position: relative;
            z-index: 1;
            color: #fff;
            max-width: 60%;

            h3 {
                font-size: 18px;
                margin: 0 0 5px;
                font-weight: bold;
            }

            p {
                font-size: 14px;
                margin: 0 0 15px;
                opacity: 0.9;
            }

            .banner-btn {
                background-color: #ff6b35;
                color: white;
                border: none;
                border-radius: 15px;
                padding: 5px 15px;
                font-size: 12px;
            }
        }
    }

    .section-title {
        display: flex;
        align-items: baseline;
        margin: 15px 0 10px;

        h2 {
            font-size: 16px;
            margin: 0;
            margin-right: 10px;
        }

        span {
            font-size: 12px;
            color: #999;
        }
    }

    .product-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: transparent;
    }

    .product-item {
        width: calc(50% - 5px);
        margin-bottom: 15px;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
    }

    .product-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .product-info {
        padding: 10px;
    }

    .product-title {
        font-size: 14px;
        color: #333;
        margin: 5px 0;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price-section {
        margin: 8px 0;
    }

    .current-price {
        font-size: 16px;
        color: #ff5000;
        font-weight: bold;
    }

    .original-price {
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
        margin-left: 5px;
    }

    .sales {
        font-size: 12px;
        color: #999;
        margin: 5px 0;
    }

    .shop-info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
        margin-top: 8px;
    }

    .shop-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70%;
    }

    .location {
        flex-shrink: 0;
    }

    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        background-color: #ffffff;
        height: 50px;
        border-top: 1px solid #eee;

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;

            &.active {
                color: #ff6b35;
            }

            .van-icon {
                font-size: 20px;
                margin-bottom: 3px;
            }

            .vip-icon {
                width: 20px;
                height: 20px;
                background-color: #ff6b35;
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 10px;
                margin-bottom: 3px;
            }
        }
    }
}
</style>